<template>
  <!-- 个人中心页 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="个人中心"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="divider"></div>
    <!-- 头部 -->
    <div
      class="header"
      @click="$router.push('/useredit')"
    >
      <!-- 如果后端返回的用户资料中有头像，我们才渲染并拼接 head_img -->
      <img
        v-if="head_img"
        class="avatar"
        :src="$baseURL + head_img"
        alt=""
      >
      <!-- v-if 和 v-else 只会执行其中一个，如果后端返回没有头像，就渲染默认头像 -->
      <img
        v-else
        class="avatar"
        src="@/assets/logo.png"
        alt=""
      >
      <div class="info">
        <p class="name">
          <i
            class="iconfont"
            :class="{ 
              iconxingbienan: gender === 1,
              iconxingbienv: gender === 0  
            }"
          ></i>
          <span>{{ nickname }}</span>
        </p>
        <p class="date">{{create_date}}</p>
      </div>
      <i class="iconfont iconjiantou1"></i>
    </div>
    <!-- 使用 Vant 组件库的 Cell 组件 -->
    <div class="divider"></div>
    <van-cell-group>
      <van-cell
        title="我的关注"
        value="关注的用户"
        to="/attention"
        is-link
      />
      <van-cell
        title="我的跟帖"
        value="跟帖/回复"
        to="/usercomment"
        is-link
      />
      <van-cell
        title="我的收藏"
        value="文章/收藏"
        to="/collect"
        is-link
      />
      <van-cell
        title="设置"
        is-link
      />
    </van-cell-group>
    <div class="divider"></div>
    <!-- 退出登录按钮 -->
    <van-button
      block
      type="default"
      @click="logOutHandle"
    >退出登录</van-button>
  </div>
</template>

<script>
// 以下两行导入是自动导入的，需要通过 jsconfig.json 配置才有自动导入
import { getUserInfo, removeToken, removeUserInfo } from "@/utils/myToken";
import { userDetail } from "@/api";
// 导入用户默认头像
import defaultImg from "@/assets/logo.png";
export default {
  data() {
    return {
      gender: 0,
      // 在 Vue 中，需要写到 data 中的数据，才能被 template 模板使用
      // 但用户资料中没有头像的时候，才使用 defaultImg
      defaultImg: defaultImg,
      // 自己能不能把默认图片的小 Bug 修复了
      head_img: "",
      nickname: "游客",
      create_date: "",
    };
  },
  // 生命周期(钩子函数)  函数
  // 在某个时期自动执行的函数。(mounted 安装：当前的Vue文件装载到项目中运行时候自动执行的一个函数)
  mounted() {
    console.log(666666, this.$baseURL);
    // 获取本地存储中的用户 id
    const { id } = getUserInfo();
    // 🧨 在发送请求前，多验证你的数据是否正常
    // 🚩 多在控制台打印其实是小成本操作，否则以后找 Bug 需要花更多的时间
    // console.log(id);
    // 发送网络请求获取用户的详情
    userDetail(id).then((res) => {
      // 解构出需要用到的数据
      const { message, data } = res.data;
      // 把获取到的数据绑定到 data 中
      this.gender = data.gender;
      // 如果有头像就使用，如果是空字符串，就使用默认头像
      this.head_img = data.head_img;
      this.nickname = data.nickname;
      // 把时间更新一下
      this.create_date = data.create_date.slice(0, 10);
    });
  },
  methods: {
    logOutHandle() {
      // console.log("你点击了退出登录按钮");
      // 1. 在用户信息页添加  退出登录按钮，并给按钮绑定点击事件。
      // 2. 清除本地存储中的 Token
      removeToken();
      // 3. 清除本地存储中的用户信息。
      removeUserInfo();
      // 4. 路由替换到首页（具体退出后需要跳转到哪个页面问产品经理）。
      // replace 这里使用替换成首页，替换后，后退就不要再回到个人中心页了
      this.$router.replace("/");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 130px;
  display: flex;
  padding: 0 20px;
  align-items: center;
  .avatar {
    width: 70px;
    height: 70px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
  }

  .info {
    flex: 1;
    font-size: 14px;
    p {
      margin: 5px 0;
    }
    .name {
      .iconxingbienan {
        color: #8ec5ee;
      }
      .iconxingbienv {
        color: pink;
      }

      span {
        margin-left: 5px;
        color: #333;
      }
    }

    .date {
      color: #999;
    }
  }

  .iconjiantou1 {
    color: #ccc;
    font-size: 25px;
  }
}
.divider {
  height: 10px;
  background-color: #f2f2f2;
}
</style>